import React, { Component } from 'react';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { Link } from 'react-router-dom'
import "./index.scss"
import { DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined, VideoCameraOutlined, UploadOutlined, } from '@ant-design/icons';
import type { MenuProps } from 'antd';

type MenuItem = Required<MenuProps>['items'][number];

//菜单添加子元素
const addItem = (label, key, icon?, children?, title?, type?) => {
	return {
		key,
		icon,
		title,
		children,
		label,
		type,
	}
}
const MenuItems = [
	/* 这个其实路由多的话，拎出一个ts文件存放菜单列表 */
	addItem("sub1模块", "sub1", <DesktopOutlined />,
		[addItem(<Link to="/sub1-sub1">sub1-sub1</Link>, "/sub1-sub1"),]
	),
	addItem("sub2模块", "sub2", <PieChartOutlined />,
		[addItem(<Link to="/sub2-sub1">sub2-sub1</Link>, "sub2-sub1"),]
	),
	addItem("sub3模块", "sub3", <TeamOutlined />),
	addItem("sub4模块", "sub4", <FileOutlined />),
]

interface MenuRouterProps {
	// onMenuClick: (value: any) => void
}

class MenuRouter extends Component<MenuRouterProps> {
	state = {
		routerKey: ""
	}

	onMenuClick = (value) => {
		console.log(value.key)
		this.setState({
			routerKey: value.key
		})
	}

	render() {
		const { routerKey } = this.state
		return (
			<Menu
				className="demo-menu"
				theme="dark"
				mode="inline"
				defaultSelectedKeys={['sub1']}
				// openKeys={[window.location.pathname.substring(1, 4)]}
				selectedKeys={[routerKey]}
				onClick={this.onMenuClick}
				items={MenuItems}
			/>
		);
	}
}

export default MenuRouter;